import React, { useState, useEffect } from 'react';

// CSS动画样式
const animationStyles = `
  @keyframes jump {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-20px) scale(1.1); }
  }
  
  @keyframes dance {
    0%, 100% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(-5deg) scale(1.05); }
    75% { transform: rotate(5deg) scale(1.05); }
  }
  
  @keyframes sad {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
  }
  
  @keyframes sleep {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(0.95); }
  }
`;

// 注入动画样式
if (typeof document !== 'undefined' && !document.getElementById('animated-character-styles')) {
  const styleElement = document.createElement('style');
  styleElement.id = 'animated-character-styles';
  styleElement.textContent = animationStyles;
  document.head.appendChild(styleElement);
}

const CharacterContainer: React.FC<{ 
  mood: 'happy' | 'sad' | 'dancing' | 'sleeping' | 'normal';
  children: React.ReactNode;
}> = ({ mood, children }) => {
  const getAnimation = () => {
    switch (mood) {
      case 'happy':
        return 'jump 0.8s ease-in-out';
      case 'dancing':
        return 'dance 1.5s ease-in-out infinite';
      case 'sad':
        return 'sad 0.5s ease-in-out 3';
      case 'sleeping':
        return 'sleep 2s ease-in-out infinite';
      default:
        return 'none';
    }
  };

  return (
    <div style={{
      fontSize: '6rem',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      height: '120px',
      animation: getAnimation(),
      transition: 'all 0.3s ease'
    }}>
      {children}
    </div>
  );
};

interface AnimatedCharacterProps {
  mood?: 'happy' | 'sad' | 'dancing' | 'sleeping' | 'normal';
  score?: number;
}

const characters = {
  normal: '🐱',
  happy: '😸',
  dancing: '💃',
  sad: '😿',
  sleeping: '😴'
};

const encouragements = [
  '加油！你做得很棒！ 🌟',
  '太厉害了！继续保持！ 💪',
  '哇！你是打字小能手！ 🏆',
  '真棒！再来一个！ 🎉',
  '完美！你越来越厉害了！ ⭐'
];

const AnimatedCharacter: React.FC<AnimatedCharacterProps> = ({ 
  mood = 'normal', 
  score = 0 
}) => {
  const [currentMood, setCurrentMood] = useState<typeof mood>('normal');
  const [showEncouragement, setShowEncouragement] = useState(false);
  const [encouragementText, setEncouragementText] = useState('');

  useEffect(() => {
    setCurrentMood(mood);
    
    if (mood === 'happy' && score > 0) {
      // 显示鼓励话语
      const randomEncouragement = encouragements[Math.floor(Math.random() * encouragements.length)];
      setEncouragementText(randomEncouragement);
      setShowEncouragement(true);
      
      // 3秒后隐藏鼓励话语
      setTimeout(() => {
        setShowEncouragement(false);
      }, 3000);
    }
  }, [mood, score]);

  // 根据分数自动切换心情
  useEffect(() => {
    if (score > 0 && score % 100 === 0) {
      setCurrentMood('dancing');
      setTimeout(() => {
        setCurrentMood('normal');
      }, 2000);
    }
  }, [score]);

  return (
    <div style={{
      textAlign: 'center',
      position: 'relative',
      marginBottom: '16px'
    }}>
      <CharacterContainer mood={currentMood}>
        {characters[currentMood]}
      </CharacterContainer>
      
      {showEncouragement && (
        <div
          style={{
            position: 'absolute',
            top: '-20px',
            left: '50%',
            transform: 'translateX(-50%)',
            backgroundColor: 'rgba(255, 255, 255, 0.95)',
            borderRadius: '20px',
            padding: '8px 16px',
            fontSize: '0.9rem',
            fontWeight: 'bold',
            color: '#ff5722',
            boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
            animation: 'jump 0.6s ease-out',
            whiteSpace: 'nowrap',
            fontFamily: '"Comic Sans MS", cursive, sans-serif',
            border: '2px solid #ffc107'
          }}
        >
          {encouragementText}
        </div>
      )}
    </div>
  );
};

export default AnimatedCharacter;